<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS3 Material 设计样式的按钮DEMO演示</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Ravikumar Chauhan">

  <!-- Meta and Opengraph tags -->
  <meta name="description" content="Material Design Buttons | by Ravikumar Chauhan">
  <meta name="keywords" content="material design, button, material button, css3, html5">
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- header -->
<header>
  <div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</header><!-- @end header -->

<!-- Main content -->
<main role="main">
  <section>
    <h3 class="heading">Fab Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-fab btn-lightBlue ripple-effect"><i class="material-icons">attach_file</i></button></div>
        <div class="captions">Normal Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-fab-mini btn-pink ripple-effect"><i class="material-icons">favorite_border</i></button></div>
        <div class="captions">Mini Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-fab-mini btn-lightBlue" disabled><i class="material-icons">cloud_upload</i></button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Raised Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue">Button</button></div>
        <div class="captions">Normal Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect">Button</button></div>
        <div class="captions">Ripple Effect</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue" disabled>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Buttons With Icon</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue"><i class="material-icons">cloud_upload</i>Button</button></div>
        <div class="captions">Icon Left</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons right">cloud_upload</i>Button</button></div>
        <div class="captions">Icon Right</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-lightBlue" disabled><i class="material-icons">cloud_upload</i>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Flat Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-flat">Button</button></div>
        <div class="captions">Flat Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-flat ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
        <div class="captions">Ripple Effect</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-flat" disabled>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Link Buttons</h3>
    <div class="wrap">
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link">Button</button></div>
        <div class="captions">Link Button</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link ripple-effect"><i class="material-icons">favorite_border</i>Button</button></div>
        <div class="captions">Ripple Effect</div>
      </div>
      <div class="holder col-3">
        <div class="demo"><button class="rkmd-btn btn-link" disabled>Button</button></div>
        <div class="captions">Disabled Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Raised Buttons in Different Sizes</h3>
    <div class="wrap">
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lg btn-lightBlue ripple-effect">Button</button></div>
        <div class="captions">Large Button</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect">Button</button></div>
        <div class="captions">Medium Button</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-sm btn-lightBlue ripple-effect">Button</button></div>
        <div class="captions">Small Button</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-xs btn-lightBlue ripple-effect">Button</button></div>
        <div class="captions">Extra Small Button</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Ripple Effect in Different Colors</h3>
    <div class="wrap">
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Default Ripple</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-dark"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Dark</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-red"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Red</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-orange"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Orange</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-yellow"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Yellow</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-green"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Green</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-purple"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Purple</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-teal"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Teal</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-pink"><i class="material-icons right">send</i>Submit</button></div>
        <div class="captions">Ripple Pink</div>
      </div>
    </div>
  </section>
  <section>
    <h3 class="heading">Buttons in Different Colors</h3>
    <div class="wrap">
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-white ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">White</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-black ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Black</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-grey ripple-effect ripple-dark"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Grey</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lightBlue ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Light Blue</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-orange ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Orange</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-amber ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Amber</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-green ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Green</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-teal ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Teal</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-cyan ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Cyan</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-indigo ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Indigo</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-deepPurple ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Deep Purple</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-pink ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Pink</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-red ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Red</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-yellow ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Yellow</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-lime ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Lime</div>
      </div>
      <div class="holder col-4">
        <div class="demo"><button class="rkmd-btn btn-brown ripple-effect"><i class="material-icons">file_download</i>Download</button></div>
        <div class="captions">Brown</div>
      </div>
    </div>
  </section>
</main><!-- @end main -->

  <script src='js/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
